<template>
  <div id="container" style="height: 100%;height: 480px;"></div>
</template>

<script>
import * as echarts from 'echarts'
import {getRealTime} from "@/axios/api";

export default {
  data () {
    return {
    }
  },
  mounted() {
    this.drawLine()
  },
  methods:{
    drawLine() {
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });

      var option;
      const categories = (function () {
        let now = new Date();
        let res = [];
        let len = 10;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
          now = new Date(+now - 60000);
        }
        return res;
      })();
      var data
      var data2
      option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          data: ["出校人数", "返校人数"],
          textStyle: {
            color: "#B4B4B4",
            fontSize:"15"
          },
          top: "0%"
        },
        grid: {
          x: "8%",
          width: "88%",
          y: "10%",
          height: "80%"
        },
        xAxis: {
          data: categories,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: "18"
          }
        },
        yAxis: [
          {
            splitLine: {show: false},
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              // formatter: "{value} ",
              fontSize: "18"
            }
          }
        ],
        series: [
          {
            name: "出校人数",
            type: "line",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#FF3030"
              }
            },
            z: -12,
            data: data
          },
          {
            name: "返校人数",
            type: "line",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#0000FF"
              }
            },
            data: data2
          }
        ]
      };
      setInterval(async function () {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
        categories.shift();
        categories.push(axisData);
        var date = await getRealTime().then(res => res.data)
        data = date[0]
        data2 = date[1]
        myChart.setOption({
          xAxis: [
            {
              data: categories
            }
          ],
          series: [
            {
              data:[10,0,1,2,3,4,56,7,8,9,10]
              // data: data
            },
            {
              data:[1,0,1,2,3,4,56,7,8,9,10]
              // data: data2
            }
          ]
        });
      }, 1000);

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
      window.addEventListener('resize', myChart.resize);
    }
  }

}

</script>
